<template>
  <div class="fenlei">
    
    <div class="shopgoods">
        <van-sidebar v-model="activeKey">
      <van-sidebar-item title="🥪🥪酱辣子夹膜" />
      <van-sidebar-item title="必❤️点驴蹄子面" />
      <van-sidebar-item title="🔥🔥招牌套餐" />
      <van-sidebar-item title="🔥🔥多人套餐" />
      <van-sidebar-item title="推荐" />
      <van-sidebar-item title="折扣" />
      <van-sidebar-item title="🥗🥗加臊子类" />
      <van-sidebar-item title="🥤🥤酒水饮料" />
      <van-sidebar-item title="🏡🏡店铺形象" />
      <van-sidebar-item title="🧸🧸顾客您好" />
   </van-sidebar>
    <div class="right">
         <div class="goods" v-for="(v,i) in arr[activeKey].goodlist" :key="i">
         <img :src="v.picture" alt="">
         <div class="info">
            <div class="text">
                <h3>{{v.name}}</h3>
                <p>{{v.promotion_info}}分</p>
                <p>月售{{v.month_saled}} 好评率100%</p>
            </div>
            <div class="price">
              <span>{{v.min_price}}</span>
              <span>+</span>
            </div>
         </div>
       </div>
     </div>
    </div>
   
     
  </div>
</template>

<script>
// import ShopInfo from "../components/ShopInfo.vue"
import {shop_info} from "../utils/apis"
export default {
  components: {
    
  },
  data() {
    return {
      activeKey: 0,
      arr:[],
     
    };
  },
  mounted(){
      // console.log(this.$route.query)
      shop_info(this.$route.query).then((res)=>{
        // console.log(res.data.shopinfo.taglist)
        this.arr=res.data.shopinfo.taglist;
       
      })
  }
}
</script>

<style lang="scss" scoped>
.fenlei{
  padding: 0 10px;
}
.shopgoods{
  display: flex;
}
.right{
   flex: 1;
    margin-left: 10px;
    >span{
      margin: 5px 0;
      color: #000;
      font-size: 14px;
      font-weight: bold;
    }
   
  }
.goods{
      margin: 0 0 20px 0;
      display: flex;
      >img{
        margin-top: 16px;
        width: 100px;
        height: 100px;
      }
      .info{
       flex: 1;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .text{
          width:178px;
          h3{
            font-size: 16px;
          }
          p{
            line-height: 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow:ellipsis ;
            color: #aaa;
          }
        }
      }
      .price{
        display: flex;
        justify-content: space-between;
        >span:nth-child(1){
          color: #f00;
          font-weight: bold;
        }
        >span:nth-child(2){
          margin-right: 10px;
          width: 20px;
          height: 20px;
          text-align: center;
          line-height: 22px;
          font-size: 16px;
          font-weight: bold;
          color: #fff;
          border-radius: 50%;
          background-color: skyblue;
        }
      }
    }
</style>